<template>
  <div class="full-box shadow-box padding-box">
    <OperateCommon :showSearch="true" :showAdd="false" @search="initData">
      <template #condition>
        <div class="condition-item">
          <el-input
            v-model="queryParams.project_name"
            placeholder="按项目名称关键字查询"
            clearable
          ></el-input>
        </div>
        <div class="condition-item">
          <el-input
            v-model="queryParams.bid_name"
            placeholder="按招标名称关键字查询"
            clearable
          ></el-input>
        </div>
        <div class="condition-item">
          <el-select v-model="queryParams.type">
            <el-option label="已关联" :value="1"></el-option>
            <el-option label="未关联" :value="2"></el-option>
          </el-select>
        </div>
      </template>
    </OperateCommon>
    <div class="table-wrapper">
      <!-- <base-table
        :columns="columns"
        :tableData="tableData"
        :showSort="true"
        :pages="{
          show: true,
          count: count
        }"
        :operate="{
          show: true,
          width: 160
        }"
        @pagination="pageChange"
      >
        <template #operate="current">
          <el-button type="success" size="mini" @click="handleView(current.row)"
            >查看</el-button
          >
          <el-button
            type="primary"
            size="mini"
            @click="handleAssociation(current.row)"
            :disabled="current.aProject_id == ''"
            >关联</el-button
          >
        </template>
      </base-table> -->
      <div class="base-table">
        <div class="table-content">
          <el-table
            border
            :data="tableData"
            :header-cell-style="{
              background: '#e6e8ec',
              color: '#000',
              height: '60px'
            }"
            height="100%"
            :cell-style="tableCellStyle"
          >
            <el-table-column
              width="50"
              align="center"
              type="index"
              :index="indexMethod"
              label="序号"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="bid_name"
              label="投标名称"
              width="400"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="aProject_name"
              label="投资审批系统项目名称"
              width="400"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="project_name"
              label="本系统项目名称"
              width="300"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="similarity"
              label="相似度"
              width="120"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="aProject_id"
              label="关联标记"
              width="120"
            >
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button size="mini" type="success" @click="handleView(scope)"
                  >查看</el-button
                >
                <el-button
                  size="mini"
                  type="primary"
                  :disabled="scope.row.aProject_id == ''"
                  @click="handleAssociation(scope)"
                  >{{
                    scope.row.aProject_id == '未关联' ? '关联' : '取消关联'
                  }}</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination-wrapper">
          <Pagination
            layout="prev, pager, next"
            :total="count"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="pageChange"
          >
          </Pagination>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible" width="80%">
      <el-card>
        <div slot="header" class="clearfix">
          <el-button type="primary" @click="relatedItems" plain>{{
            this.dialogButtomState == '未关联' ? '关联项目' : '取消关联'
          }}</el-button>
        </div>
        <el-descriptions
          class="margin-top"
          :column="2"
          title="项目详情"
          direction="vertical"
          border
        >
          <el-descriptions-item>
            <template slot="label">项目名称</template>
            {{ dialogData.project_name }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 责任单位 </template>
            {{ dialogData.responsible_unit_name }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 投资类型 </template>
            {{ dialogData.Invest_type }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 行业分类 </template>
            {{ dialogData.dict_value }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 建设规模及内容 </template>
            {{ dialogData.notice_title }}
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions
          class="margin-top"
          title="招标详情"
          :column="2"
          direction="vertical"
          border
        >
          <el-descriptions-item>
            <template slot="label"> 标段名称 </template>
            {{ dialogData.bid_name }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 招标人 </template>
            {{ dialogData.owner_name }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 标段类型 </template>
            {{ dialogData.bid_type }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 招标代理机构名称 </template>
            {{ dialogData.bid_agency_name }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 公告标题 </template>
            {{ dialogData.notice_title }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </el-dialog>
  </div>
</template>
<script>
import OperateCommon from '@/components/Common/OperateCommon.vue';
import BaseTable from '@/components/Common/BaseTable.vue';
import {
  getbidExternalList,
  getbidExternalRelation,
  getbidExternalDetail
} from '@/api/projectManagement/Index';
import Pagination from '@/components/Common/Pagination.vue';
export default {
  components: { OperateCommon, BaseTable, Pagination },
  data() {
    return {
      queryParams: {
        project_name: '',
        pageNum: 1,
        pageSize: 20,
        type: 2,
        bid_name: ''
      },
      tableData: [],
      columns: column,
      count: 0,
      dialogVisible: false,
      dialogData: {},
      dialogButtomState: ''
    };
  },
  methods: {
    tableCellStyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 4) {
        if (row.similarity >= '0.00%' || row.similarity <= '50.00%') {
          return 'background:green;color:#fff';
        } else if (row.similarity >= '50.00%' || row.similarity <= '90.00%') {
          return 'background:orange;color:#fff';
        } else {
          return 'background:red;color:#fff';
        }
      }
      if (columnIndex == 5) {
        if (row.aProject_id == '未关联') {
          return 'color:red;font-weight:bold';
        } else {
          return 'color:green;font-weight:bold';
        }
      }
    },
    initData() {
      getbidExternalList(this.queryParams).then((res) => {
        if (res.code == 0) {
          encodeURIComponent;
          this.tableData = res.data;
          this.count = res.num;
          this.tableData.forEach((i) => {
            i.similarity = `${i.similarity}%`;
            if (i.aProject_id == '') {
              i.aProject_id = '未关联';
            } else {
              i.aProject_id = '已关联';
            }
          });
        }
      });
    },
    pageChange(val) {
      this.queryParams.pageNum = val.page;
      this.queryParams.pageSize = val.limit;
      this.initData();
    },
    handleView(val) {
      let params = {
        project_id: val.row.project_id,
        id: val.row.id
      };
      this.dialogButtomState = val.row.aProject_id;
      getbidExternalDetail(params).then((res) => {
        if (res.code == 0) {
          this.dialogData = res.data;
          this.dialogVisible = true;
        }
      });
    },
    relatedItems() {
      let params = {
        id: this.dialogData.id,
        project_id: this.dialogData.project_id,
        type: 0
      };
      if (this.dialogButtomState == '未关联') params.type = 1;
      else params.type = 2;
      getbidExternalRelation(params).then((res) => {
        if (res.code == 0) {
          this.$message.success(res.data);
          this.dialogVisible = false;
        }
      });
    },
    handleAssociation(val) {
      const parameters = {
        id: val.row.id,
        project_id: val.row.project_id,
        type: 0
      };
      if (val.row.aProject_id == '未关联') {
        parameters.type = 1;
      } else {
        parameters.type = 2;
      }
      getbidExternalRelation(parameters).then((res) => {
        if (res.code == 0) {
          this.$message.success(res.data);
          setTimeout(() => {
            this.initData();
          }, 200);
        }
      });
    },
    indexMethod(index) {
      return index + 1;
    }
  },
  created() {
    this.initData();
  }
};
const column = [
  {
    prop: 'bid_name',
    label: '投资审批系统项目名称',
    width: '',
    minWidth: '300',
    align: ''
  },
  {
    prop: 'project_name',
    label: '本系统项目名称',
    width: '',
    minWidth: '300',
    align: ''
  },
  {
    prop: 'similarity',
    label: '相似度',
    width: '',
    minWidth: '100',
    align: ''
  },
  {
    prop: 'aProject_id',
    label: '关联标记',
    width: '',
    minWidth: '100',
    align: ''
  }
];
</script>
<style lang="scss" scoped>
.base-table {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.table-content {
  height: calc(100% - 80px);
}
.pagination-wrapper {
  height: 60px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.el-card__body {
  display: flex !important;
  justify-content: space-between;
}

.el-descriptions {
  width: 49%;
  display: inline-block;
  &:nth-child(2) {
    margin-left: 14px;
  }
}
</style>
